<template>
  <div>
<preHeader></preHeader>
<div class="top-block"></div>
<div class="item-list" >
      <div class="item" v-for="(item,index) in dataInfo" :key='index'>
        <my-radio class="radio" :value="item.id" @click.native='getRadio(item.id)' :checked='radio == item.id'></my-radio>
        <img :src="item.image" alt="">
        <p class="title">{{item.title}}</p>
      </div>
    </div>
    <mt-button size='normal' @click='saveTem()' type="primary">保存</mt-button>
  </div>
</template>

<script>
  import {get_promotion,get_edit_promotion} from '@/api/';
  export default {
    data(){
      return{
        tel:"",
        radio:'',//默认选中的id
        dataInfo:'',//模板列表
        checkVal:''//选中模板的id
      }
    },
    methods:{
      getData(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_promotion({tel:this.tel}).then(res =>{
          // console.log(res)
          this.dataInfo = res.data.list;
          this.radio = res.data.checked;
        })
      },
      getRadio(id){//获取被选中的id
        this.checkVal = id;
      },
      saveTem(){//保存模板
        console.log(this.checkVal)
        get_edit_promotion({tel:this.tel,id:this.checkVal}).then( res=>{
          if(res.status == 1){
            this.$router.push('/qrcode')
          }
        })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>
  .radio{z-index: 100;position: absolute;}
.item-list{margin: 1em;}
.item{width: 47%;border: 1px solid #ccc;border-radius: 6px;height: 200px;margin-bottom: 1em;position: relative;}
.item .title{position: absolute;bottom: 0;width: 100%;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;background-color:rgba(0,0,0,.2);text-align: center;}
.item:nth-of-type(even){float: right;}
.item:nth-of-type(odd){float: left;}
.mint-button{transform: translateX(-50%);background: rgb(47, 57, 83);color: #fff;margin-bottom: 10px;width: 150px;border-radius: 20px;position: absolute;bottom: 2em;left: 50%;}
.item img{position: absolute;width: 100%;height: 100%;top: 0;z-index: 0;}
</style>
